<script setup lang="ts">
import { ref } from 'vue';

import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { withDefaultTableConfig } from '#/adapter';
import { getUserList } from '#/api';

import { columns } from './data';
import deptTree from './deptTree.vue';

const selectDeptId = ref<string[]>(['0']);
const tableLoading = ref(false);

const [Table, tableApi] = useVbenVxeGrid(
  withDefaultTableConfig({
    columns,
    proxyConfig: {
      ajax: {
        query: async ({ page }, { formValues }) => {
          tableLoading.value = true;
          return await getUserList({
            deptId: selectDeptId.value[0],
            index: page.currentPage,
            size: page.pageSize,
            ...formValues,
          });
        },
        querySuccess() {
          tableLoading.value = false;
        },
      },
    },
  })
    .withTableTitle({
      tableTitle: '用户列表',
    })
    .build(),
);
</script>

<template>
  <Page auto-content-height>
    <div class="flex h-full gap-[16px]">
      <deptTree
        v-model:select-dept-id="selectDeptId"
        v-model:user-list-lading="tableLoading"
        class="w-[300px]"
        @reload="tableApi.reload"
      />
      <Table class="flex-1 overflow-hidden" />
    </div>
  </Page>
</template>

<style scoped></style>
